import {StylesheetCSS} from "cytoscape";
import {Core} from "cytoscape";

const HOVER_COLOR = "#F05A7E";
const SELECTED_NODE_BORDER_COLOR = "#9E1B32";
const SELECTED_NODE_BORDER_WIDTH = 3;

// 定义一个函数，用于将bw值映射到5 - 15的宽度范围
function mapBwToWidth(bw: number, minBw: number, maxBw: number): number {
  if (minBw === maxBw) {
    return 5;
  }
  return 5 + (15 - 5) * ((bw - minBw) / (maxBw - minBw));
}

// 定义一个函数，用于更新边的宽度样式
export function updateEdgeWidthStyle(cy: Core, minBw: number, maxBw: number): void {
  const edgeWidthStyle = {
    width: function (ele: any) {
      const bw = ele.data("bw");
      return mapBwToWidth(bw, minBw, maxBw);
    },
  };
  // 添加新的边宽度样式
  cy.style().selector("edge").style(edgeWidthStyle).update();
}

export const style: StylesheetCSS[] = [
  {
    selector: "node",
    css: {
      label: "data(label)",
      height: 20,
      width: 20,
      shape: "round-rectangle",
      "background-color": "#8B5DFF",
      "font-family": "Noto Sans, sans-serif",
      "font-weight": "normal",
      "font-size": 12,
    },
  },

  {
    selector: "edge",
    css: {
      // width: 5,
      opacity: 0.5,
      // label: "data(label)",
      width: "5",
      "curve-style": "unbundled-bezier",
      "text-rotation": "autorotate",
      "line-color": "#b4b4b4",
      "font-family": "Noto Sans, sans-serif",
      "font-weight": "normal",
      "font-size": 8,
    },
  },

  {
    selector: "node:selected",
    css: {
      "background-color": HOVER_COLOR, // 选中时背景色
      "border-width": SELECTED_NODE_BORDER_WIDTH, // 边框宽度增大
      "border-color": SELECTED_NODE_BORDER_COLOR, // 选中时边框颜色
    },
  },
];
